﻿<style>
    #sin-chart-t,#sin-chart-p{
        width:100%;
    }
    /*.legend{
        position:absolute;
        top:0;
        left:0;
    }*/
</style>
<div id="content">
    <div smart-include="app/project/views/sub-header.tpl.html"></div>
    <div class="container_box" style="background-color: white">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#detail" data-toggle="tab">油罐数据</a>
            </li>
            <!-- <li>
                <a href="#chart" data-toggle="tab">温度曲线</a>
            </li> -->
            <li>
                <a href="#ios" data-toggle="tab">设备信息</a>
            </li>
            <li>
                <a href="#store" data-toggle="tab">油罐信息</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content row">
            <div class="tab-pane fade in active" id="detail" style="padding:20px;">
                <div class="row">
                    <div class="col-sm-12 col-md-3">
                        <table class="table noborder-table detail-left-table" style="margin-top:100px;">
                            <tbody class="text-center">
                                <tr>
                                    <td><b>罐号</b></td>
                                    <td><a>{{tankInfo.name}} 【{{tankInfo.code}}】</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><b>货品名称</b></td>
                                    <td><a>{{tankInfo.item_name}}</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><b>货主名称</b></td>
                                    <td><a>{{tankInfo.company_name}}</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><b>当前液位</b></td>
                                    <td><a>{{tankInfo.real_pos | number : 2 }}</a></td>
                                    <td><a class="pull-left">m3</a></td>
                                </tr>
                                <tr>
                                    <td><b>平均温度</b></td>
                                    <td><a>{{tankInfo.avg_temp | number : 2 }}</a></td>
                                    <td><a class="pull-left">°C</a></td>
                                </tr>
                                <tr>
                                    <td><b>库存数量</b></td>
                                    <td><a>{{tankInfo.qty}}</a></td>
                                    <td><a class="pull-left">{{tankInfo.unit}}</a></td>
                                </tr>
                                <tr>
                                    <td><b>液位库存</b></td>
                                    <td><a>{{tankInfo.y_qty}}</a></td>
                                    <td><a class="pull-left">m3</a></td>
                                </tr>
                                <tr>
                                    <td><b>流量库存</b></td>
                                    <td><a>{{tankInfo.l_qty}}</a></td>
                                    <td><a class="pull-left">m3/s</a></td>
                                </tr>
                                <!-- <tr>
                                    <td><b>当前密度</b></td>
                                    <td><a>{{tankInfo.density}}</a></td>
                                    <td><a class="pull-left">t/m3</a></td>
                                </tr>
                                <tr>
                                    <td><b>体积</b></td>
                                    <td><a>{{tankInfo.volume}}</a></td>
                                    <td><a class="pull-left">m3</a></td>
                                </tr>
                                <tr>
                                    <td><b>质量</b></td>
                                    <td><a>{{tankInfo.weight}}</a></td>
                                    <td><a class="pull-left">t</a></td>
                                </tr> -->
                                
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-12 col-md-9" style=" overflow-x:auto;">
                        <div style="width:1000px; overflow-x:visible;">
                            <div class="img_box pull-left">
                                <img src="styles/img/tank/tank.png" alt="" class="img-responsive">
                            </div>
                            <table class="table noborder-table text-center pull-left detail-right-table" style="margin-top:29px; max-width:none;width:600px;">
                                <thead>
                                    <tr style="background:none;">
                                        <th style="border:none; text-align:center"></th>
                                        <th style="border:none;"></th>
                                        <th style="border:none;"></th>
                                        <th style="border:none;"></th>
                                        <!-- <th style="border:none; text-align:center">温度计状态</th> -->
                                        <!-- <th style="border:none; text-align:center">温度计高度</th> -->
                                        <!-- <th style="border:none; text-align:center">报警设定温度</th> -->
                                        <!-- <th style="border:none; text-align:center">编辑</th> -->
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="item in thermometers" style="height:40px;">
                                        <td>
                                            <a class="temp">
                                                ---&nbsp;&nbsp;<div class="label label-primary">{{item.value}}&nbsp;&nbsp;&nbsp;°C</div>
                                            </a>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <!-- <td>
                                            <select name="" id="">
                                                <option value="0">实时</option>
                                                <option value="1">定时</option>
                                            </select>
                                        </td> -->
                                        <!-- <td>{{item.high | number : 2 }}</td>
                                        <td>{{item.alert | number : 2 }}</td>
                                        <td>
                                            <button class="btn btn-primary btn-edit" style="padding:1px 5px;" ng-click="edit(item.tid)"><i class="fa fa-edit"></i></button>
                                        </td> -->
                                    </tr>
                                    <!-- <tr>
                                        <td></td>
                                        <td><b>盲区温度</b></td>
                                        <td><b>{{tankInfo.blind_temp}}</b></td>
                                        <td></td>
                                        <td><a class="btn btn-sm btn-warning" ng-click="addtemp()">添加温度计</a></td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-sm-12 text-center margin-top-30">
                        <a class="btn btn-lg btn-warning" style="padding:10px 50px;" href="#/myallprojects/">返回库区总览</a>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="chart" style=" padding: 20px">
                <section id="widget-grid" class="">
                    <!-- row -->
                    <div class="row">
            
                        <!-- NEW WIDGET START -->
                        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget" id="levelmeter" data-widget-editbutton="false" style="display:none">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                                    <h2>液位</h2>
            
                                </header>
            
                                <!-- widget div-->
                                <div>
            
                                    <!-- widget edit box -->
                                    <div class="jarviswidget-editbox">
                                        <!-- This area used as dropdown edit box -->
            
                                    </div>
                                    <!-- end widget edit box -->
                                    <!-- widget content -->
                                    <div class="widget-body no-padding">
            
                                        <div id="sin-chart-p" class="chart has-legend"></div>
            
                                    </div>
                                    <!-- end widget content -->
            
                                </div>
                                <!-- end widget div -->
            
                            </div>
                            <!-- end widget -->
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget" id="flowmeter" data-widget-editbutton="false" style="display:none">
                                
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                                    <h2>温度曲线</h2>
            
                                </header>
            
                                <!-- widget div-->
                                <div>
            
                                    <!-- widget edit box -->
                                    <div class="jarviswidget-editbox">
                                        <!-- This area used as dropdown edit box -->
            
                                    </div>
                                    <!-- end widget edit box -->
                                    <!-- widget content -->
                                    <div class="widget-body no-padding">
            
                                        <div id="sin-chart-t" class="chart has-legend"></div>
            
                                    </div>
                                    <!-- end widget content -->
            
                                </div>
                                <!-- end widget div -->
            
                            </div>
                            <!-- end widget -->
                            
            
                        </article>
                        <!-- WIDGET END -->
            
                    </div>
                    <!-- end row -->
                    <!-- row -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="panel panel-default">
                                <div class="panel-body status">
                                    <div class="clearfix">
                                        <div class="text">
                                            <div class="row" id="choices">
                                                <!-- <div class="col-xs-4 col-md-3 col-lg-2" ng-repeat="thermo in thermoInfo.thermometer">
                                                    <div class="well text-center connect"> -->
                                                        <!-- <img src="styles/img/avatars/gril1.png" alt="img" class="margin-bottom-5 margin-top-5"> -->
                                                        <!-- <div class="margin-bottom-5 margin-top-5" style="border-radius:50% 50% 0; background:#2b92ea; width:50px; height:50px; display:inline-block">
                                                            <strong style="color:#fff; line-height:50px;">{{thermo.temp}}°C</strong>
                                                        </div>
                                                        <br>
                                                        <span class="font-xs"><b>温度计{{thermo.tid}}（{{thermo.high}}m）</b></span>
                                                        <br> -->
                                                        <!-- <a href="javascript:void(0);" class="btn btn-xs btn-primary margin-top-5 margin-bottom-5">
                                                            <i class="glyphicon glyphicon-eye-open"></i> 
                                                        </a>
                                                        <a href="javascript:void(0);" class="btn btn-xs btn-default margin-top-5 margin-bottom-5">
                                                            <i class="glyphicon glyphicon-eye-close"></i> 
                                                        </a>
                                                        <br> -->
                                                        <!-- <span class="onoffswitch">
                                                            <input type="checkbox" name="thermometer-{{thermo.tid}}" class="onoffswitch-checkbox ng-untouched ng-valid ng-dirty ng-valid-parse" id="thermometer-{{thermo.tid}}">
                                                            <label class="onoffswitch-label" for="thermometer-{{thermo.tid}}">
                                                                <span class="onoffswitch-inner" data-swchon-text="显示" data-swchoff-text="隐藏"></span>
                                                                <span class="onoffswitch-switch"></span>
                                                            </label>
                                                        </span>
                                                    </div>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <ul class="links text-right">
                                        <li class="">
                                            <a href="javascript:void(0);">Find people you know <i class="fa fa-arrow-right"></i> </a>
                                        </li>
                                    </ul> -->
                                    <div class="links" style="padding:5px;">
                                        <div id="tempcharts" class="chart has-legend" style="width:100%;height:350px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                </section>
                <!-- end widget grid -->                
            </div>
            <div class="tab-pane fade" id="ios" style=" padding: 25px">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover margin-bottom-0 sensor_table" id="device_table">
                        <thead>
                            <th>序号</th>
                            <th>设备名称</th>
                            <th>设备编号</th>
                            <th>设备类型</th>
                            <th>客户名称</th>
                            <th>地址</th>
                            <th>地理位置</th>
                            <!-- <th>采集周期</th> -->
                            <th>信号</th>
                            <th>状态</th>
                            <!-- <th>创建人id</th>
                            <th>项目id</th> -->
                        </thead>
                        <tbody>
                            <tr ng-repeat="device in devices">
                                <td>{{device.id}}</td>
                                <td>{{device.devicename}}</td>
                                <td>{{device.deviceid}}</td>
                                <td>{{device.type == 1 ? '流量计' :(device.type == 2 ? '液位计' : (device.type == 3 ? '温度计' : '其他')) }}</td>
                                <td>{{device.clientname}}</td>
                                <td>{{device.zone}}</td>
                                <td>{{device.pos}}</td>
                                <!-- <td>{{device.col_cycle}}</td> -->
                                <td class="text-align-center"><img ng-src="{{device.signal | signalfilter}}"></td>
                                <td class="text-align-center"><span class="{{device.status | status}}">生效</span></td>
                                <!-- <td>{{device.fid}}</td>
                                <td>{{device.pid}}</td> -->
                            </tr>
                        </tbody>
                    </table>
                    
                </div>
                <div class="dt-toolbar-footer">
                    <tm-pagination conf="paginationConf"></tm-pagination>
                </div>
            </div>
            <div class="tab-pane fade" id="store" style=" padding: 25px">
                <!-- 油罐信息 -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="well well-sm bg-color-teal txt-color-white pull-left" style="width:40%; padding:20px; background:#dda358!important; border-color:#dfcdcd!important">
                            <p>仓库编号</p>
                            <h2 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-tag"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.id}}
                            </h2>
                            <p>仓库名称</p>
                            <h2 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.name}} <span class="{{device.status | status}}" style="font-size:12px;">生效</span>
                            </h2>
                            <!-- <p>仓库状态</p>
                            <h2 style="margin:10px 0;">{{infor.status}}</h2> -->
                            <p>仓库地区</p>
                            <h3 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-globe"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.country}}，{{infor.province}}，{{infor.city}},  
                                {{infor.address}}; 
                                邮编：{{infor.postcode}}
                            </h3>
                            <p>位置坐标</p>
                            <h3 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-map-marker"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.x_pos}},{{infor.y_pos}}
                            </h3>
                            <!-- <p>邮编</p>
                            <h2 style="margin:10px 0;">{{infor.postcode}}</h2> -->
                            <p>描述</p>
                            <h4 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.description}}
                            </h4>
                        </div>
                        <div class="well well-sm text-center pull-left" style="width:40%; padding:20px 0; border-left:0; height:361px;">
                            <h5>库存信息</h5>
                            <div class="list-group storeinfo">
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    货主名称：{{store.company_name}} 【{{store.company_id}}】
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    货品名称：{{store.item_name}} 【{{store.item_code}}】
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    库存数量：{{store.qty}} {{store.unit}}
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    液位计库存：{{store.y_qty}} m3
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    流量计库存：{{store.l_qty}} m3/s
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    更新时间：{{store.downtime}}
                                </a>
                            </div>
                        </div>
                    </div>
        
                </div>
            </div>
        </div>
        
    </div>
</div>

